<template>
  <m-card :padding="false">
    <view class="box">
      <view class="card" v-for="(item, i) in list" :key="i">
        <view class="card-title c333 font28 flex align-center" @click="expandHandler(i)">
          <text>{{ item.title }}</text>
          <view class="mglauto">
            <u-icon :name="item.active ? 'arrow-up' : 'arrow-down'" size="24rpx" color="#999999"></u-icon>
          </view>
        </view>

        <view class="card-content flex flex-wrap" v-if="item.active">
          <template v-if="(item.content || []).length > 0">
            <image mode="heightFix" v-for="(img, idx) in item.content || []" :key="idx" :src="img"></image>
          </template>

          <view class="tc c999 font28" v-else>暂无</view>
        </view>
      </view>
    </view>
  </m-card>
</template>

<script>
import { getInfomationApi } from "@/api/modules/homepage.js";
export default {
  data() {
    return {
      list: [
        {
          title: "铂金合作伙伴",
          id: 55,
          active: false,
          content: [],
        },
        {
          title: "黄金合作伙伴",
          content: [],
          active: false,
          id: 56,
        },
        {
          title: "白银合作伙伴",
          active: false,
          content: [],
          id: 57,
        },
        {
          title: "合作媒体",
          active: false,
          content: [],
          id: 58,
        },
      ],
    };
  },

  async mounted() {
    this.getRecord(0, false);
    this.getRecord(1, false);
    this.getRecord(2, false);
    this.getRecord(3, false);
  },

  methods: {
    expandHandler(index) {
      this.getRecord(index, true);
    },

    async getRecord(index, loading) {
      const item = this.list[index];
      if (item.content.length > 0) {
        item.active = !item.active;
        this.list.splice(index, 1, item);
        return;
      }
      try {
        if (loading)
          uni.showLoading({
            title: "加载中",
          });
        const res = await getInfomationApi(item.id);
        item.content = (res.data || []).map((v) => this.getImgUrl(v.ti_icon));
        item.active = !item.active;
        this.list.splice(index, 1, item);
      } catch (error) {}
      if (loading) uni.hideLoading();
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  padding: 20rpx 40rpx;
}

.card {
  &:last-child {
    .card-title {
      border: none;
    }
    .card-content {
      border-top: 2rpx dashed #d8d8d8;
    }
  }
  &-title {
    padding: 20rpx 0;
    border-bottom: 2rpx dashed #d8d8d8;
  }

  &-content {
    padding: 20rpx 0;
    padding-top: 0;

    image {
      height: 40rpx;
      margin-top: 20rpx;
      margin-right: 20rpx;
    }
  }
}
</style>
